<template>
  <view class="rider-entrance-page">
    <view class="page-content">
      <view class="title">填写骑手基本信息</view>

      <view class="row-field">
        <van-field
          :value="username"
          label="姓名"
          placeholder="请输入姓名"
          :readonly="status === 0 || status === 1"
          @change="handleChangeName"
        />
      </view>

      <view class="row-field">
        <van-field
          :value="mobile"
          center
          clearable
          label="手机号"
          placeholder="请输入手机号"
          use-button-slot
          :readonly="status === 0 || status === 1"
          @change="handleChangeMobile"
        >
          <button
            slot="button"
            open-type="getPhoneNumber"
            @getphonenumber="getPhoneNumber"
            class="btn-class"
            :disabled="status === 0 || status === 1"
          >
            获取手机号
          </button>
        </van-field>
      </view>
      <view class="row-field" @click="handleChangeExpress">
        <van-field
          :value="expressName"
          label="快递公司"
          placeholder="请选择快递公司"
          readonly
        >
        </van-field>
      </view>
      <view class="submit-btn-wrap">
        <view class="submit-btn" @click="handleSubmit">提交申请 </view>
      </view>

      <view v-if="status === 0" class="tip">资料审核中，请耐心等待</view>

      <view v-if="status === 2" class="tip tip-err">审核失败：{{ memo }}</view>
    </view>
    <van-action-sheet
      :show="expressShow"
      :actions="expressList"
      @select="onSelect"
    />
    <van-dialog id="van-dialog" />
    <van-toast id="van-toast" />
  </view>
</template>

<script>
import Dialog from "wxcomponents/vant/dialog/dialog";
import Toast from "wxcomponents/vant/toast/toast";

const app = getApp();
export default {
  data() {
    return {
      id: "",
      username: "",
      mobile: "",
      status: "",
      memo: "",
      expressList: [],
      express: "",
      expressName: "",
      expressShow: false,
    };
  },
  methods: {
    getPhoneNumber(res) {
      const { detail } = res;
      const { code } = detail;

      Toast.loading({
        message: "加载中",
        mask: false,
        duration: 0,
        zIndex: 9999999,
        forbidClick: true,
      });
      app.request({ code }, "/api/logistics/user/auth_mobile").then((res) => {
        const { code, data, msg } = res;

        if (code === 1) {
          const { phoneNumber } = data;

          Toast.clear();
          this.mobile = phoneNumber;
        } else {
          Toast(msg);
        }
      });
    },
    handleChangeName(res) {
      const { detail } = res;

      this.username = detail;
    },
    handleChangeExpress(res) {
      this.expressShow = true;
    },
    onSelect(item) {
      // 点击选项时默认不会关闭菜单，可以手动关闭
      this.expressShow = false;
      this.expressName = item.detail.name;
      this.express = item.detail.express;
    },
    handleChangeMobile(res) {
      const { detail } = res;

      this.mobile = detail;
    },
    handleSubmit() {
      const { username, mobile, status, expressName, express } = this;

      if (status === 0 || status === 1) {
        Toast("当前状态不可操作");
        return;
      }
      if (!username) {
        Toast("请输入姓名");
        return;
      }
      if (!mobile) {
        Toast("请输入手机号");
        return;
      }

      app
        .request(
          {
            username,
            mobile,
            expressName,
            express,
          },
          "/api/logistics/express/express_user"
        )
        .then((res) => {
          const { code, data, msg } = res;

          if (code === 1) {
            Toast("提交成功");

            setTimeout(() => {
              uni.navigateBack();
            }, 800);
          } else {
            Toast(msg);
          }
        });
    },
    handleGetInfo() {
      app
        .request({}, "/api/logistics/express/express_user_apply")
        .then((res) => {
          const { code, data, msg } = res;

          if (code === 1) {
            if (data) {
              const {
                id,
                username,
                mobile,
                status,
                memo,
                expressName,
                express,
              } = data;

              this.id = id;
              this.username = username;
              this.mobile = mobile;
              this.status = parseInt(status);
              this.memo = memo;
              this.expressName = expressName;
              this.express = express;
            }
          } else {
            Toast(msg);
          }
        });
    },
    handleGetExpressCompanyList() {
      app.request({}, "/api/logistics/order/kd_list").then((res) => {
        console.log(res);
        const { code, data } = res;
        if (code === 1) {
          this.expressList = data;
        }
      });
    },
  },

  onLoad() {
    this.handleGetInfo();
    this.handleGetExpressCompanyList();
  },
};
</script>

<style lang="scss">
page {
  width: 100%;
  min-height: 100vh;
  background: linear-gradient(to bottom, #5d7bff, #546cfe);
}

.rider-entrance-page {
  padding: 22rpx;
  box-sizing: border-box;

  .page-content {
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 10rpx;
    padding-bottom: 6rpx;

    .title {
      padding-top: 46rpx;
      padding-left: 38rpx;
      padding-bottom: 34rpx;
      box-sizing: border-box;
      color: rgba(38, 139, 255, 100);
      font-size: 32rpx;
      font-family: PingFangSC-Semibold;
    }

    .row-field {
      width: 100%;
      .btn-class {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 190rpx;
        height: 58rpx;
        font-size: 24rpx;
        color: #fff;
        background-color: #1989fa;
        border-color: #1989fa;
      }
    }

    .submit-btn-wrap {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 40rpx;

      .submit-btn {
        width: 650rpx;
        height: 78rpx;
        background-color: #268bff;
        border-radius: 24px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: rgba(255, 255, 255, 100);
        font-size: 34rpx;
        font-family: PingFangSC-Regular;
        margin-top: 16rpx;
      }

      .disabled {
        background-color: rgba(38, 139, 255, 0.4);
      }
    }

    .tip {
      width: 100%;
      padding: 13rpx 20rpx;
      box-sizing: border-box;
      font-size: 28rpx;
    }
  }
}
</style>
